<template>
  <div>
    <!--   <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <brack :params1="'用户管理'" :params2="'用户列表'"></brack>
    <el-card class="box-card">
      <el-row>
        <el-col :span="8"
          ><el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="12"
          ><el-button type="primary" @click="add">添加用户</el-button></el-col
        >
      </el-row>
      <template>
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="#" width="50"> </el-table-column>
          <el-table-column prop="username" label="姓名" width="300">
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="300">
          </el-table-column>
          <el-table-column prop="mobile" label="电话"> </el-table-column>
          <el-table-column prop="role_name" label="角色"> </el-table-column>
          <el-table-column prop="address" label="状态">
            <template slot-scope="scope">
              <el-switch
                @change="btnfalg(scope.row)"
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="220">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="dialogFormVisible(scope.row)"
              ></el-button>

              <el-button type="text" @click="open(scope.row.id)">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                ></el-button
              ></el-button>

              <el-tooltip class="item" content="分配角色" placement="top">
                <el-button
                  effect="dark"
                  size="mini"
                  type="warning"
                  icon="el-icon-setting"
                  @click="fenpeiuser(scope.row)"
                >
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 编辑框 -->
    <el-dialog title="修改用户" :visible.sync="dialogForm">
      <el-form :model="form" ref="editForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="* 邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.eml" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="* 手机" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="dialogbtn">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加用户 -->
    <el-dialog title="添加用户" :visible.sync="addForm">
      <el-form :model="form" ref="addForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.eml" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addForm = false">取 消</el-button>
        <el-button type="primary" @click="adduser">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配角色弹窗 -->
    <el-dialog title="分配角色" :visible.sync="fpuser">
      <div>当前的用户:{{ username }}</div>

      <div>当前的角色:{{ role_name }}</div>
      <!-- 级联选择器 -->
      <div class="block">
        <span class="demonstration">分配新角色: </span>
        <!--  <el-cascader
          v-model="value"
          :options="arr"
          :props="props"
          @change="handleChange"
        ></el-cascader> -->

        <el-select v-model="total" placeholder="请选择">
          <el-option
            v-for="item in arr"
            :key="item.value"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div slot="footer">
        <el-button @click="call">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  users_api,
  usersBtn_api,
  usersRemove_api,
  redact_api,
  roles_api,
  adduser_api
} from "@/api";
export default {
  data() {
    return {
      disabled: true,
      value: true,
      fpuser: false,
      currentPage4: 1,
      total: 1,
      users: {
        query: "",
        pagesize: 2,
        pagenum: 1
      },
      input3: "",
      list: [],
      arr: [],
      dialogTableVisible: false,
      dialogForm: false,
      addForm: false,
      form: {
        name: "",
        eml: "",
        phone: "",
        id: "",
        password: ""
      },
      role_name: "",
      username: "",
      props: {},
      rules: {
        eml: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 6, max: 18, message: "请输入正确的邮箱格式", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11个字符", trigger: "blur" }
        ]
      },
      formLabelWidth: "120px"
    };
  },
  created() {
    this.getuser();
    //获取角色
    this.getarr();
  },
  methods: {
    // 状态开关
    async btnfalg(row) {
      // console.log(row);
      // var id= row.id
      // var mg_state=row.mg_state
      const res = await usersBtn_api({ uId: row.id, type: row.mg_state });
      console.log(res);
      if (res.data.meta.status == 200) {
        this.$message({
          type: "success",
          message: "修改状态成功!"
        });
      }
    },
    //获取user列表
    async getuser() {
      const res = await users_api(this.users);
      // console.log(res);
      this.list = res.data.data.users;
      this.total = res.data.data.total;
    },
    //删除功能
    /*  open(scope) {
      console.log(scope);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await usersRemove_api(scope);
          this.getuser();
          console.log(res);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }, */
    async open(id) {
      console.log(id);
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
      //判断点击的是确认还是取消
      if (res == "confirm") {
        const res = await usersRemove_api(id);
        console.log(res); //200
        if (res.data.meta.status == 200) {
          //删除成功
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        } else {
          this.$message({
            type: "success",
            message: "删除失败!"
          });
        }
      }
    },
    //编辑按钮
    dialogFormVisible(row) {
      this.dialogForm = true;
      // console.log(row);
      this.form.name = row.username;
      this.form.eml = row.email;
      this.form.phone = row.mobile;
      this.form.id = row.id;
    },
    //编辑里确定按钮
    dialogbtn() {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          //如果规则通过  发送请求
          const { data: res } = await redact_api(this.form);
          console.log(res);
          this.dialogForm = false;

          this.$message("更新用户信息成功");
          this.getuser();
        } else {
          this.$message("更新用户信息失败");
        }
      });
      this.dialogForm = false;
    },
    //添加用户
    async add() {
      this.addForm = true;
    },
    //添加用户
    adduser() {
      this.$refs.addForm.validate(async valid => {
        const { data: res } = await adduser_api(this.form);
        if (res.meta.status == 201) {
          this.$message("添加用户成功");
          this.addForm = false;
        } else {
          this.$message("添加用户失败");
        }
      });
    },
    // 分配权限按钮
    fenpeiuser(row) {
      this.fpuser = true;
      console.log(row);
      this.role_name = row.role_name;
      this.username = row.username;
      console.log(this.list);
    },
    //获取角色数据
    async getarr() {
      const { data: res } = await roles_api();
      this.arr = res.data;

      console.log(this.arr, 111111);
    },
    // 取消按钮
    call() {
      this.fpuser = false;
    },
    //  确认按钮
    confirm() {
      this.$message("更新角色失败");
    },
    handleChange() {},
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.users.pagesize = val;
      this.getuser();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.users.pagenum = val;
      this.getuser();
    }
  }
};
</script>
<style scoped lang="less">
.el-breadcrumb {
  margin: 20px 0;
}
.el-card__body {
  .el-button {
    margin-left: 15px;
  }
  .el-button--danger {
    margin-left: 0;
  }
}
.el-table {
  margin-top: 20px;
  
}
</style>
